<template>
  <div class="home">
    <div class="top">
      <div class="top-left">
        <img :src="user.avatar" alt />
      </div>
      <span class="top-right">{{user.nickname}}</span>
    </div>
    <div class="logo">
      <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="(i,index) in obj.banner" :key="index">
          <img :src="baseUrl + i.image" />
        </swiper-slide>
        <!-- Optional controls -->
      </swiper>
    </div>
    <van-search
      class="search"
      @click="search"
      style="border-radius: 5px;"
      placeholder="请输入搜索你喜欢的课程"
    />
    <div class="tab">
      <div class="shike" @click="toNextpage9()">
        <h3>视频课程</h3>
        <p>选择感兴趣的视频</p>
        <div class="shi">
          <img src="../assets/img/shipin.png" />
        </div>
      </div>
      <div class="yinke" @click="toNextpage10()">
        <h3>音频课程</h3>
        <p>选择感兴趣的音频</p>
        <div class="yin">
          <img src="../assets/img/erji.png" />
        </div>
      </div>
    </div>
    <div class="jingxuan">
      <p class="shipin" :class="{active: which_to_show == 'Shiping'}" @click="showShipin()">精选视频</p>
      <p class="yinpin" :class="{active: which_to_show == 'Yinping'}" @click="showYinpin()">精选音频</p>
    </div>
    <component :is="which_to_show" :list="list" :baseUrl="baseUrl"></component>
  </div>
</template>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// @ is an alias to /src
import Shiping from "@/views/shiping.vue";
import Yinping from "@/views/yinping.vue";
import { createDecipher } from "crypto";
import axios from "axios";
import cookies from "vue-cookies";
import { wxShare } from "@/mixin/share";
import cookie from "vue-cookies";
export default {
  name: "home",
  components: {
    Shiping,
    Yinping
  },
  mixins: [wxShare],
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASEURL,
      which_to_show: "Shiping",
      activeName: "a",
      obj: {},
      banner: [],
      list: [],
      user: {},
      swiperOption: {
        autoplay: true,
        loop: true
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // ...
      }
    };
  },
  methods: {
    search() {
      this.$router.push("/search");
    },
    showShipin() {
      this.which_to_show = "Shiping";
      this.list = this.obj.video;
    },
    showYinpin() {
      this.which_to_show = "Yinping";
      this.list = this.obj.voice;
    },
    toNextpage5() {
      this.$router.push({ name: "kecheng" });
    },
    toNextpage6() {
      this.$router.push({ name: "shouyin" });
    },
    toNextpage9() {
      this.$router.push({ name: "shike" });
    },
    toNextpage10() {
      this.$router.push({ name: "yinke" });
    }
  },
  async mounted() {
    let res = await this.$http.get(`api/index/index`);
    console.log(res);
    this.obj = res.data;
    this.banner = res.data.banner;
    this.list = res.data.video;
    if(cookie.get("token")){
      let res2 = await this.$http(`api/my/index`);
      this.user = res2.data;
      this.$store.commit("user", res2.data);
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.jingxuan {
  height: 25px;
  line-height: 25px;
  margin-bottom: 20px;
}
.van-nav-bar {
  text-align: left;
  background: rgba(242, 242, 242, 1);
}
.van-nav-bar__left .van-nav-bar__text {
  color: black;
  font-size: 3rem;
}
.van-nav-bar__title {
  max-width: 70%;
  margin-left: 44px;
}
.van-icon,
.van-icon::before {
  font-size: 20px;
  color: black;
}
.van-icon-arrow:before {
  font-size: 1.5rem;
  color: rgba(210, 210, 210, 1);
}
.van-cell {
  padding: 20px 16px;
}
.van-cell__left-icon {
  font-size: 0.5rem;
}
.van-cell__title {
  font-family: PingFang SC;
  font-size: 1rem;
}
.top {
  width: 100%;
  height: 51px;
}
.van-search .van-cell {
  padding: 0;
}
.top-left {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  float: left;
  margin: 13px 0 0 15px;
  overflow: hidden;
}
.top-left > img {
  width: 100%;
  height: 100%;
}
.top-right {
  line-height: 25px;
  font-size: 14px;
  color: #333333;
  float: left;
  margin: 15px 0 0 6px;
}
.logo {
  width: 100%;
  height: 140px;
}
.logo img {
  width: 100%;
  height: 140px;
}
.search {
  width: 345px;
  height: 40px;
  background: #edeff2 !important;
  margin: -20px 15px 0;
  padding-left: 10px;
  position: relative;
  z-index: 9;
}
.van-search__content {
  background: #edeff2;
}
.tab {
  display: flex;
  padding: 0 15px;
  margin: 20px 0;
  justify-content: space-between;
}
.shike {
  width: 165px;
  height: 70px;
  background: url(../assets/img/视频背景.png) no-repeat;
  background-size: cover;
  position: relative;
}
.shike h3 {
  width: 60px;
  height: 14.5px;
  font-size: 15px;
  color: #ffffff;
  font-weight: 600;
  position: relative;
  top: 14.5px;
  left: 15px;
}
.shike p {
  font-size: 10px;
  color: #c8d0ff;
  position: relative;
  top: 21.5px;
  left: 15px;
}
.shi {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3f44eb;
  position: absolute;
  top: 11.5px;
  right: 6px;
}
.shi img {
  width: 19.5px;
  height: 21px;
  position: relative;
  top: 8px;
  left: 10px;
}
.yinke {
  width: 165px;
  height: 70px;
  background: url(../assets/img/音频背景.png) no-repeat;
  background-size: cover;
  position: relative;
}
.yinke h3 {
  width: 60px;
  height: 14.5px;
  font-size: 15px;
  color: #ffffff;
  font-weight: 600;
  position: relative;
  top: 14.5px;
  left: 15px;
}
.yinke p {
  font-size: 10px;
  color: #c8d0ff;
  position: relative;
  top: 21.5px;
  left: 15px;
}
.yin {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #087eee;
  position: absolute;
  top: 11.5px;
  right: 5px;
}
.yin img {
  width: 19.5px;
  height: 21px;
  position: relative;
  top: 8px;
  left: 10px;
}
.shipin {
  height: 17px;
  color: #616265;
  float: left;
  margin: 0 15px;
}
.shipin {
  color: #333333;
}
.shipin.active {
  font-size: 18px;
  font-weight: bold;
}
.yinpin {
  color: #333333;
}
.yinpin.active {
  font-size: 18px;
  font-weight: bold;
}
</style>
